<!DOCTYPE html>
<html dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Peri Dialog Examples</title>
    <link rel="stylesheet" href="peri.css">
    <style>
        .container {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            text-align: center;
        }
        .demo-btn {
            display: inline-block;
            margin: 10px;
            padding: 12px 24px;
            background: #1890ff;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        .demo-btn:hover {
            background: #40a9ff;
            transform: translateY(-1px);
        }
        .demo-group {
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            background: #f5f5f5;
            text-align: left;
        }
        h3 {
            margin-bottom: 15px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="demo-group">
            <h3>1. 基础使用</h3>
            <button class="demo-btn" onclick="showBasic()">基础弹窗</button>
            <button class="demo-btn" onclick="showWithTitle()">带标题弹窗</button>
            <button class="demo-btn" onclick="showAutoClose()">自动关闭</button>
        </div>

        <div class="demo-group">
            <h3>2. 主题设置</h3>
            <button class="demo-btn" onclick="showLight()">亮色主题</button>
            <button class="demo-btn" onclick="showDark()">暗色主题</button>
        </div>

        <div class="demo-group">
            <h3>3. 动画效果</h3>
            <button class="demo-btn" onclick="showAnimBounce()">弹跳效果</button>
            <button class="demo-btn" onclick="showAnimFade()">淡入效果</button>
            <button class="demo-btn" onclick="showAnimSlideTop()">顶部滑入</button>
            <button class="demo-btn" onclick="showAnimSlideBottom()">底部滑入</button>
            <button class="demo-btn" onclick="showAnimFlip()">翻转效果</button>
        </div>

        <div class="demo-group">
            <h3>4. 特殊功能</h3>
            <button class="demo-btn" onclick="showToast()">Toast提示</button>
            <button class="demo-btn" onclick="showLoading()">加载状态</button>
            <button class="demo-btn" onclick="showConfirm()">确认框</button>
            <button class="demo-btn" onclick="showSteps()">步骤引导</button>
            <button class="demo-btn" onclick="showPhoto()">图片显示</button>
        </div>

        <div class="demo-group">
            <h3>5. 按钮设置</h3>
            <button class="demo-btn" onclick="showButtonRight()">确定按钮在右</button>
            <button class="demo-btn" onclick="showButtonLeft()">确定按钮在左</button>
        </div>

        <div class="demo-group">
            <h3>6. 其他示例</h3>
            <button class="demo-btn" onclick="showLongText()">长文本</button>
        </div>
    </div>

    <script src="peri.js"></script>
    <script>
        // Basic Usage
        function showBasic() {
            peri.open({
                content: '这是一个基础弹窗示例',
                dir: 'ltr'
            });
        }

        function showWithTitle() {
            peri.open({
                title: '温馨提示',
                content: '这是一个带标题的弹窗示例',
                dir: 'ltr'
            });
        }

        function showAutoClose() {
            peri.open({
                content: '此弹窗将在2秒后自动关闭',
                time: 2,
                dir: 'ltr'
            });
        }

        // Theme Settings
        function showLight() {
            peri.open({
                theme: 'light',
                title: '亮色主题',
                content: '这是一个亮色主题的弹窗示例',
                btn: ['确定', '取消'],
                dir: 'ltr'
            });
        }

        function showDark() {
            peri.open({
                theme: 'dark',
                title: '暗色主题',
                content: '这是一个暗色主题的弹窗示例',
                btn: ['确定', '取消'],
                dir: 'ltr'
            });
        }

        // Animations
        function showAnimBounce() {
            peri.open({
                title: '弹跳效果',
                content: '这是弹跳动画效果示例',
                anim: 'bounce',
                btn: ['确定'],
                dir: 'ltr'
            });
        }

        function showAnimFade() {
            peri.open({
                title: '淡入效果',
                content: '这是淡入动画效果示例',
                anim: 'fade',
                btn: ['确定'],
                dir: 'ltr'
            });
        }

        function showAnimSlideTop() {
            peri.open({
                title: '顶部滑入',
                content: '这是顶部滑入动画效果示例',
                anim: 'slide-top',
                btn: ['确定'],
                dir: 'ltr'
            });
        }

        function showAnimSlideBottom() {
            peri.open({
                title: '底部滑入',
                content: '这是底部滑入动画效果示例',
                anim: 'slide-bottom',
                btn: ['确定'],
                dir: 'ltr'
            });
        }

        function showAnimFlip() {
            peri.open({
                title: '翻转效果',
                content: '这是翻转动画效果示例',
                anim: 'flip',
                btn: ['确定'],
                dir: 'ltr'
            });
        }

        // Special Features
        function showToast() {
            peri.toast({
                content: '操作成功！',
                dir: 'ltr'  // LTR يۆنىلىشى
            });
        }

        function showLoading() {
            var loadingIndex = peri.loading({
                content: '加载中...',
                dir: 'ltr'  // LTR يۆنىلىشى
            });
            setTimeout(function() {
                peri.close(loadingIndex);
                peri.toast({
                    content: '加载完成！',
                    dir: 'ltr'  // LTR يۆنىلىشى
                });
            }, 2000);
        }

        function showConfirm() {
            peri.open({
                title: '确认提示',
                content: '您确定要删除这条记录吗？',
                btn: ['确定', '取消'],
                dir: 'ltr',
                yes: function(index) {
                    peri.close(index);
                    peri.toast({
                        content: '删除成功！',
                        dir: 'ltr'
                    });
                }
            });
        }

        function showSteps() {
            peri.steps({
                steps: [
                    {title: '第一步', content: '这是第一步的说明内容'},
                    {title: '第二步', content: '这是第二步的说明内容'},
                    {title: '第三步', content: '这是第三步的说明内容'}
                ],
                btnText: {
                    next: '下一步',
                    prev: '上一步'
                },
                dir: 'ltr',
                finish: function() {
                    peri.toast({
                        content: '完成！',
                        dir: 'ltr'
                    });
                }
            });
        }

        function showPhoto() {
            peri.photo('https://foruda.gitee.com/images/1729736641247389155/d1d26d21_1850385.png', {
                title: '图片示例'
            });
        }

        // 按钮位置示例
        function showButtonRight() {
            peri.open({
                title: '按钮位置',
                content: '确定按钮在右侧',
                btn: ['确定', '取消'],
                btnAlign: 'right',
                dir: 'ltr'
            });
        }

        function showButtonLeft() {
            peri.open({
                title: '按钮位置',
                content: '确定按钮在左侧',
                btn: ['确定', '取消'],
                btnAlign: 'left',
                dir: 'ltr'
            });
        }

        function showLongText() {
            peri.open({
                title: '长文本',
                content: '这是长文本示例, 这是长文本示例, 这是长文本示例, 这是长文本示例 ,这是长文本示例',
                btn: ['确定'],
                dir: 'ltr'
            });
        }
    </script>
</body>
</html>
